<template>
  <view class="cart-container">
     <!-- 商品列表 -->
 		<u-swipe-action>
 	   <u-swipe-action-item 
	  v-for="(item, index) in cartList" :key="item.cartid"
	 :index="index"
	 :name="item.cartid"
	 :options="options1"
     @click="handleSwipeClick">
         <view class="swipe-action u-border-top u-border-bottom">
             
                  <view class="goods-item">
                  <!--  左侧复选框 -->
                    <view class="checkbox">
        				<u-checkbox-group> 
                      <u-checkbox 
        				:checked="item.checked"
                        @change="toggleSelect(index)"
                      ></u-checkbox>
        			  	</u-checkbox-group> 
                    </view>
                    <!-- 商品图片 -->
                   <u-image 
                      :src="baseUrl+'/'+item.goods.gimg.split(',')[0]" 
                      width="160rpx" 
                      height="160rpx" 
                      mode="aspectFill"
                    ></u-image>
					

        
                    <!-- 商品信息 -->
                    <view class="info">
                      <text class="title u-line-2">{{ item.goods.detailtitle }}</text>
                      <text class="price">¥{{ item.price }}</text>
                      
                      <!-- 数量操作 -->
                      <view class="action">
                        <u-number-box 
                          v-model="item.quantity" 
                          :min="1" 
                          @change="changeQuantity(index, $event)"
                        ></u-number-box>
                      </view>
                    </view>
                  </view></view>
        		  </u-swipe-action-item>
        	  </u-swipe-action>
            <!-- 底部操作栏 -->
              <view class="footer">
                <!-- 全选 -->
                <view class="select-all">
        	<u-checkbox-group>
                  <u-checkbox 
        		  ref="all"
        			:checked="allChecked"
        			@change="toggleAll"
                  >全选</u-checkbox>
        	</u-checkbox-group> 
  </view>
  
    <!-- 总计 -->
         <view class="total">
            <text>合计：¥{{ totalPrice }}</text>
            <text class="count">共{{ totalCount }}件</text>
          </view>
  
          <!-- 结算按钮 -->
          <u-button 
            type="primary" 
            size="medium" 
  		  class="settle-btn"
            @click="handleSettle"
          >
		  <span class="btn-content">
		      <span class="btn-text">去结算  (¥{{ totalPrice }})</span>
		      <u-icon name="rewind-right" class="btn-icon"></u-icon>
			  
		    </span>
		  </u-button>
	
		  
		  
        </view>
    </view>
</template>

<script>
import {
		selectByUserid,deleteById,editNum
	} from '@/api/cart.js';
import { API_BASE_URL } from '@/utils/appConfig'
export default {
  data() {
    return {
      allChecked: false,
      cartList: [],
	  userid:3,
	  baseUrl:API_BASE_URL,
	  options1: [{
	  					text: '删除',
	  					style: {
	  						backgroundColor: '#f56c6c'
	  					}
	  				}],
	 
    }
  },
  computed: {
    // 计算总价
    totalPrice() {
      return this.cartList
        .filter(item => item.checked)
        .reduce((sum, item) => sum + item.price * item.quantity, 0)
        .toFixed(2)
    },
    // 计算总数量
    totalCount() {
      return this.cartList
        .filter(item => item.checked)
        .reduce((sum, item) => sum + item.quantity, 0)
    }
  },
  methods: {
	  getCartList(){
		  selectByUserid({userid:this.userid}).then(res =>{
			  console.log('API返回数据:', res); // 先查看数据结构
			  let list = res.data;
			   this.cartList = list.map(item=>{
				   item.checked = false;
				   console.log(res);
				   return item;
				   
			   })
			   console.log(JSON.stringify(this.cartList));
		  })
	  },
    // 切换单个商品选中状态
    toggleSelect(index) {
      this.cartList[index].checked = !this.cartList[index].checked
	  console.log(this.cartList[index].checked)
      this.updateAllChecked()
    },

    // 修改商品数量
    changeQuantity(index, value) {
      this.cartList[index].quantity = value
	 const cart={cartid:this.cartList[index].cartid,quantity:value.value}
		   console.log(JSON.stringify(cart)+"   ")
		  editNum(cart).then(res=>{
			    console.log("修改成功")
				})
    },
    // 全选/取消全选
    toggleAll() {
      this.allChecked = !this.allChecked
      this.cartList.forEach(item => {
	  item.checked = this.allChecked
	   console.log("asfdaf44")	
    })
	},

    // 更新全选状态
    updateAllChecked() {
      this.allChecked = this.cartList.every(item => item.checked)
	  console.log(this.allChecked)
    },
	


    // 去结算
    handleSettle() {
      const selectedItems = this.cartList.filter(item => item.checked)
	  console.log(selectedItems)
      if (selectedItems.length === 0) {
        return uni.showToast({ title: '请选择商品', icon: 'none' })
      }
      // uni.navigateTo({
      //   url: '/pages/order/confirm'
      // })
	  uni.$u.route({
		  url:'pages/order/createOrder',
		  params:{
			  items:JSON.stringify(selectedItems)
		  }
	  })
    },
	
		handleSwipeClick(item){
			console.log(item.name+"  .....sdfsdf")
			uni.showModal({
				title: '温馨提示',
				content: '确定要删除吗？',
				success: res => {
					if (res.confirm) {
						// this.show1 = false
						deleteById(item.name).then(res=>{
							console.log("删除成功");
							this.getCartList();
						})
					}
				}
			})
	
  },
  onShow() {
  		this.getCartList();
  },
  onLoad() {
	
  	this.getCartList();
  }
}}
</script>

<style lang="scss" scoped>
.cart-container {
  padding-bottom: 100rpx;

  .goods-item {
    display: flex;
    align-items: center;
    padding: 20rpx;

    .checkbox {
      margin-right: 20rpx;
    }

    .info {
      flex: 1;
      margin-left: 20rpx;
      
      .title {
        font-size: 28rpx;
        color: #333;
        // @include u-line-2;
      }

      .price {
        color: #e4393c;
        font-size: 32rpx;
        margin: 10rpx 0;
        display: block;
      }
    }
  }

  .footer {
	  position: fixed;
	  left:0rpx;
	  bottom:120rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
 
    .select-all {
      margin-right: 30rpx;
    }

    .total {
      // flex: 1;
	  width:350rpx;
      margin-left: 20rpx;
	  margin-right:60rpx;
      .count {
        color: #999;
        font-size: 24rpx;
        margin-left: 15rpx;
      }
    }
	.btn{
		// align-items: flex-end;
		margin-left:auto;
	}
  }
}


.settle-btn {
  /* 基础样式 */
  background: linear-gradient(135deg, #ff557f, #ff0000);
  border: none;
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(255, 85, 127, 0.3);
  padding: 0 1px;
  height: 50px;
  transition: all 0.3s ease;
  
  /* 文字样式 */
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
}

.settle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 85, 127, 0.4);
}

.settle-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(255, 85, 127, 0.3);
}

.btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  margin-right: 8px;
}

.btn-icon {
  transition: transform 0.3s ease;
}

.settle-btn:hover .btn-icon {
  transform: translateX(3px);
}


</style>